<template>
  <div class="message">
    <!-- <img :src="text.img" alt="" :class="text.img===undefined?'defaud':'header_img'">
    <h3>{{text.msg}}</h3>-->
    <div class="item-message-box" v-for="(item,index) in text" :key="index">
      <div class="item-message">
        <img :src="item.img" :class="item.img===undefined?'defaud':'header_img'" />
        <div class="item-message-content">
          <p class="username">{{item.username}}</p>
          <div class="content-box">
            <div class="triangle"></div>
            <p class="content">{{item.msg}}</p>
          </div>
          <span class="time">时间</span>
        </div>
      </div>
    </div>
    
    <div class="occlusion"></div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },

  methods: {},
  components: {}
};
</script>

<style scoped>
/* 聊天内容显示框全局 */
.message {
  margin-top: -40px;
  height: 45vh;
  overflow: auto;
  border-bottom: 1px solid #ddd;
  position: relative;
}
.item-message {
  display: flex;
  z-index: 2000 !important;
}
/* 设置滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  background-color: white;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 50px;
}
/* 滚动条 */
::-webkit-scrollbar-thumb {
  border-radius: 3rem;
  background-color: #ddd;
  width: 23px;
}
.header_img {
  height: 30px;
  width: 30px;
  border-radius: 8px;
}
.defaud {
  display: none;
}
.item-message-content {
  width: 60vw;
  position: relative;
  top: -10px;
}
.username {
  font-size: 12px;
  position: relative;
  top: -4px;
  padding-left: 10px;
}
.content {
  background: green;
  position: relative;
  top: -10px;
  margin-left: 10px;
  border-radius: 5px;
  padding: 8px;
}
.time {
  position: relative;
  left: 50%;
  background: #000;
  font-size: 12px;
  color: #fff;
}
.occlusion {
  width: 100%;
  height: 64.38%;
  background-color: #f5f5f5;
  opacity: 0.3;
  position: fixed;
  top: 7%;
}
.item-message-box {
  padding: 10px;
}
.item-message-content {
  position: relative;
  z-index: 2000 !important;
}
.content-box {
  display: flex;
  align-items: center;
    width: 70%;
}
.triangle {
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid green;
  border-bottom: 5px solid transparent;
  align-self: stretch;
  position: relative;
  right: -10px;
  top: 14px;
}
/*1： 在布局之前一定要想清楚，计划好，多利用块级元素独占一行特性 
*2：使用absolute是一定要考虑清楚是否会让本来就需要块级元素特性或者margin功能消失
*3：想清楚这样做的目的，想清楚是否会影响到其它元素
*/
</style>
